<?php 
    $slider	=	$this->getSlider();
    $_status = $slider['status'];
?>
<?php if($slider['status'] == 1):?>
<?php
	$model	=	Mage::getModel('core/email_template_filter');
	
    
	$images	=	$this->getImages($slider['images']);
    $sliderID		= 	$slider['id'];
	$sliderSerial	=	$sliderID.''.rand(1, 1000);
	$sliderHtmlID 	= 	'em_owlcarousel_'.$sliderID.'_'.$sliderSerial;
	$sliderHtmlID_wrapper = $sliderHtmlID.'_wrapper';

	$bannerWidth  = $slider['slider_params']['size_width'] ? 'width:'.$slider['slider_params']['size_width'].'px;' : '';
	$bannerHeight = $slider['slider_params']['size_height'] ? 'height:'.$slider['slider_params']['size_height'].'px;' : '';
    $thumbWidth = $slider['navigation']['thumb_width'] ? $slider['navigation']['thumb_width'] : 50;
    $thumbHeight = $slider['navigation']['thumb_height'] ? $slider['navigation']['thumb_height'] : 50;
?>
<div class="em-owlcarousel-slideshow <?php if($slider['appearance']['hover_pause'] == 'true'):?>em-minislideshow-stop-on-hover<?php endif;?>">
    <div id="<?php echo $sliderHtmlID.'_sync1' ?>" class="owl-carousel">
        <?php $_counter = 0 ?>
        <?php foreach ($images as $key=>$value) : ?>
            <div class="item"> 
                <a href="<?php echo $value['link'] ?>">
                    <?php if($slider['appearance']['lazy_load']=='true'):?>
                        <img alt="<?php echo $value['url'] ?>" class="lazyOwl img-responsive" src="<?php echo $this->getSkinUrl('images/loading.gif') ?>" data-src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).'em_minislideshow/'.$value['url']; ?>"/>
                    <?php else:?>
                        <img alt="<?php echo $value['url'] ?>" class="img-responsive" src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).'em_minislideshow/'.$value['url']; ?>"/>
                    <?php endif;?>                        
                </a>
                <div class="em-owlcarousel-description">
                    <?php foreach($value['info'] as $skey=>$sval): ?>
                        <div class="<?php echo $sval['animation'] ?> em-owlcarousel-des em-owlcarousel-des-<?php echo $_counter ?>">
                            <?php echo $model->filter($sval['text']) ?>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php $_counter++ ?>
        <?php endforeach; ?> 
    </div>
    <?php if($slider['navigation']['nav_enable']=='true' && in_array('thumbnail',$slider['navigation']['nav_type'])):?>
    <div id="<?php echo $sliderHtmlID.'_sync2' ?>" class="owl-carousel">
        <?php $_counter = 0 ?>
        <?php foreach ($images as $key=>$value) : ?>
            <?php 
                $urlThumb = "";
        		if(empty($urlThumb)){	//try to get resized thumb
        			$pathThumb = $value['url'];
        			if(!empty($pathThumb))
        				$urlThumb = $this->getResizeImage($pathThumb,$thumbWidth,$thumbHeight);
        		}
        		//if not - put regular image:
        		if(empty($urlThumb))
        			$urlThumb = $value['url'];
            ?>
            <div class="item em-owlcarousel-thumbs-0<?php echo $_counter ?>">
                <?php if($slider['appearance']['lazy_load']=='true'):?>
                    <img alt="<?php echo $urlThumb ?>" class="lazyOwl img-responsive" src="<?php echo $this->getSkinUrl('images/loading.gif') ?>" data-src="<?php echo $urlThumb ?>"/>
                <?php else:?>
                    <img alt="<?php echo $urlThumb ?>" class="lazyOwl img-responsive" src="<?php echo $urlThumb ?>"/>
                <?php endif;?>
            </div>
            <?php $_counter++ ?>
        <?php endforeach ?>
    </div>
    <?php endif;?>
</div>
<script type="text/javascript">
(function($) {
	$(document).ready(function() {		
		var sync1 = $('#<?php echo $sliderHtmlID ?>_sync1');		
		sync1.owlCarousel({
			singleItem: true,
            scrollPerPage: false,
            stopOnHover: <?php echo $slider['appearance']['hover_pause'] ? $slider['appearance']['hover_pause'] : false ?>,
			lazyLoad: <?php echo $slider['appearance']['lazy_load'] ? $slider['appearance']['lazy_load'] : false ?>,
			
            <?php
                if($slider['navigation']['nav_enable']=='true'){
                    $_navType = array_values($slider['navigation']['nav_type']);  
                    foreach($_navType as $_key => $_value){
                        if($_navType[$_key] == 'thumbnail') continue;
                        echo $_navType[$_key].',';
                    }
                }
            ?>
            navigationText : ["<?php echo $slider['navigation']['arrows_pre'] ? $slider['navigation']['arrows_pre'] : "Pre" ?>", "<?php echo $slider['navigation']['arrows_next'] ? $slider['navigation']['arrows_next'] : "Next" ?>"],
            <?php if(in_array('thumbnail',$slider['navigation']['nav_type'])):?>
			afterAction: syncPosition,
            <?php endif;?>			
            transitionStyle : '<?php echo $slider['appearance']['animation_type'] ? $slider['appearance']['animation_type'] : 'fadeUp' ?>',
            
            <?php if($slider['appearance']['progress_bar']!='false'): ?>
                slideSpeed : 500,
                paginationSpeed : 500,
                afterInit : progressBar,
                afterMove : moved,
                startDragging : pauseOnDragging
            <?php else:?>
                <?php if($slider['appearance']['auto_play']):?>
                    autoPlay : true,
                <?php else:?>
                    autoPlay : false,
                <?php endif;?>
            <?php endif;?>
            
		});
        <?php if(in_array('thumbnail',$slider['navigation']['nav_type'])):?>
            var sync2 = $('#<?php echo $sliderHtmlID ?>_sync2');
    		sync2.owlCarousel({
    			items: <?php echo $_counter ?> ,
    			itemsMobile: [479, 2],
    			pagination: false,
                responsiveRefreshRate: 100,
                lazyLoad: <?php echo $slider['appearance']['lazy_load'] ? $slider['appearance']['lazy_load'] : false ?>,   
    			afterInit: function(el) {
    				el.find('.owl-item').eq(0).addClass('synced');
    			}			
    		});
            function syncPosition(el) {
    			var current = this.currentItem;
    			$('#<?php echo $sliderHtmlID ?>_sync2').find('.owl-item').removeClass('synced').eq(current).addClass('synced')
    			if ($('#<?php echo $sliderHtmlID ?>_sync2').data('owlCarousel') !== undefined) {
    				center(current);
    			}
    		}
    		$('#<?php echo $sliderHtmlID ?>_sync2').on('click', '.owl-item', function(e) {
    			e.preventDefault();
    			var number = $(this).data('owlItem');
    			sync1.trigger('owl.goTo', number);
    		});
            function center(number) {
    			var sync2visible = sync2.data('owlCarousel').owl.visibleItems;
    			var num = number;
    			var found = false;
    			for (var i in sync2visible) {
    				if (num === sync2visible[i]) {
    					var found = true;
    				}
    			}
    			if (found === false) {
    				if (num > sync2visible[sync2visible.length - 1]) {
    					sync2.trigger('owl.goTo', num - sync2visible.length + 2)
    				} else {
    					if (num - 1 === -1) {
    						num = 0;
    					}
    					sync2.trigger('owl.goTo', num);
    				}
    			} else if (num === sync2visible[sync2visible.length - 1]) {
    				sync2.trigger('owl.goTo', sync2visible[1])
    			} else if (num === sync2visible[0]) {
    				sync2.trigger('owl.goTo', num - 1)
    			}
    		}
        <?php endif;?>
		
        <?php if($slider['appearance']['progress_bar']!='false'): ?>
    		//Init progressBar where elem is $("#owl-demo")
            var time = 5; // time in seconds
    		var $progressBar, $bar, $elem, isPause, tick, percentTime;
    		function progressBar(elem) {
    			$elem = elem;
    			//build progress bar elements
    			buildProgressBar();
    			//start counting
    			start();
    		}
    		//create div#progressBar and div#bar then prepend to $("#owl-demo")
    
    		function buildProgressBar() {
    			$progressBar = $("<div>", {
    				id: "progressBar"
    			});
    			$bar = $("<div>", {
    				id: "bar"
    			});
    			$progressBar.append($bar).prependTo($elem);
    		}
    
    		function start() {
    			//reset timer
    			percentTime = 0;
    			isPause = false;
    			//run interval every 0.01 second
    			tick = setInterval(interval, 10);
    		};
    
    		function interval() {
    			if (isPause === false) {
    				percentTime += 1 / time;
    				$bar.css({
    					width: percentTime + "%"
    				});
    				//if percentTime is equal or greater than 100
    				if (percentTime >= 100) {
    					//slide to next item 
    					$elem.trigger('owl.next')
    				}
    			}
    		}
    		//pause while dragging 
    
    		function pauseOnDragging() {
    			isPause = true;
    		}
    		//moved callback
    
    		function moved() {
    			//clear interval
    			clearTimeout(tick);
    			//start again
    			start();
    		}
        <?php endif;?>
	});
})(jQuery);
</script>	
<?php endif;?>